<template>
  <sweet-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
  >
    <sweet-button type="primary">Click to upload</sweet-button>
    <template #tip>
      <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
    </template>
  </sweet-upload>
</template>
<script setup>
import {ref} from 'vue';
import {SweetMessage, SweetMessageBox} from '@hw-seq/sweet-ui-base';

const fileList = ref([
  {
    name: 'element-plus-logo.svg',
    url: '/assets/image/arrow-left.png'
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg'
  }
]);

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview = uploadFile => {
  console.log(uploadFile);
};

const handleExceed = (files, uploadFiles) => {
  SweetMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove = (uploadFile, uploadFiles) => {
  return SweetMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
    () => true,
    () => false
  );
};
</script>
